<template>
  <normal-content>
    <a-space direction="vertical">
      <a-row>
        <a-col :span="24">
          <a-image
            :preview="false"
            style="border-radius: 0.5rem;object-fit: cover;"
            :src="aboutImage"
          />
        </a-col>
      </a-row>
      <div class="center">
        <a-space class="center" direction="vertical" size="small">
          <a-space>
            <a-image
              height="2rem"
              width=""
              :preview="false"
              :src="appIcon"
            />
            <p style="font-size: 2rem">{{ appName }}</p>
          </a-space>
          <a-space>
            <a-button type="text">启动器: v{{ appVersion }}</a-button>
            <a-button type="text">tauri: v{{ tauriVersion }}</a-button>
          </a-space>
        </a-space>
      </div>
      <a-row :gutter="16" class="center">
        <a-col :span="6" id="github">
          <a-card hoverable="hoverable" size="small"
                  @click="()=>open('https://github.com/bling-yshs/HYZL-Tauri')">
            <div class="between">
              <github-filled/>
              Github
              <right-outlined/>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" id="gitee">
          <a-card hoverable="hoverable" size="small"
                  @click="()=>open('https://gitee.com/bling_yshs/hyzl-tauri')">
            <div class="between">
              <icon>
                <template #component>
                  <svg width="1em" height="1em" viewBox="0 0 1024 1024">
                    <path
                      d="M512 512m-426.666667 0a426.666667 426.666667 0 1 0 853.333334 0 426.666667 426.666667 0 1 0-853.333334 0Z"
                      fill="#C71D23">
                    </path>
                    <path
                      d="M727.978667 464.64h-242.346667a21.077333 21.077333 0 0 0-21.034667 21.034667v52.650666a21.077333 21.077333 0 0 0 21.034667 21.077334h147.541333c11.605333 0 21.034667 9.429333 21.034667 21.077333v10.538667c0 34.901333-28.288 63.189333-63.189333 63.189333H390.826667a21.077333 21.077333 0 0 1-21.077334-21.034667V432.981333a63.189333 63.189333 0 0 1 63.232-63.189333h294.912a21.12 21.12 0 0 0 21.077334-21.077333l0.042666-52.650667a21.034667 21.034667 0 0 0-21.034666-21.12H432.981333a158.037333 158.037333 0 0 0-158.037333 158.037333v294.997334c0 11.605333 9.472 21.077333 21.077333 21.077333h310.784a142.208 142.208 0 0 0 142.250667-142.250667v-121.173333a21.077333 21.077333 0 0 0-21.077333-21.034667z"
                      fill="#FFFFFF">
                    </path>
                  </svg>
                </template>
              </icon>
              Gitee
              <right-outlined/>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" id="bilibili">
          <a-card hoverable="hoverable" size="small"
                  @click="()=>open('https://space.bilibili.com/54987969')">
            <div class="between">
              <icon>
                <template #component>
                  <svg width="1em" height="1em" viewBox="0 0 1024 1024">
                    <path
                      d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z"
                      fill="#EC5D85"></path>
                    <path
                      d="M512 241.96096h52.224l65.06496-96.31744c49.63328-50.31936 89.64096 0.43008 63.85664 45.71136l-34.31424 51.5072c257.64864 5.02784 257.64864 43.008 257.64864 325.03808 0 325.94944 0 336.46592-404.48 336.46592S107.52 893.8496 107.52 567.90016c0-277.69856 0-318.80192 253.14304-324.95616l-39.43424-58.368c-31.26272-54.90688 37.33504-90.40896 64.68608-42.37312l60.416 99.80928c18.18624-0.0512 41.18528-0.0512 65.66912-0.0512z"
                      fill="#EF85A7"></path>
                    <path
                      d="M512 338.5856c332.8 0 332.8 0 332.8 240.64s0 248.39168-332.8 248.39168-332.8-7.75168-332.8-248.39168 0-240.64 332.8-240.64z"
                      fill="#EC5D85"></path>
                    <path
                      d="M281.6 558.08a30.72 30.72 0 0 1-27.47392-16.97792 30.72 30.72 0 0 1 13.73184-41.216l122.88-61.44a30.72 30.72 0 0 1 41.216 13.74208 30.72 30.72 0 0 1-13.74208 41.216l-122.88 61.44a30.59712 30.59712 0 0 1-13.73184 3.23584zM752.64 558.08a30.60736 30.60736 0 0 1-12.8512-2.83648l-133.12-61.44a30.72 30.72 0 0 1-15.04256-40.7552 30.72 30.72 0 0 1 40.76544-15.02208l133.12 61.44A30.72 30.72 0 0 1 752.64 558.08zM454.656 666.88a15.36 15.36 0 0 1-12.288-6.1952 15.36 15.36 0 0 1 3.072-21.49376l68.5056-50.91328 50.35008 52.62336a15.36 15.36 0 0 1-22.20032 21.23776l-31.5904-33.024-46.71488 34.72384a15.28832 15.28832 0 0 1-9.13408 3.04128z"
                      fill="#EF85A7"></path>
                    <path
                      d="M65.536 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM362.25024 383.03744l34.816 303.17568h34.64192L405.23776 381.1328zM309.52448 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM446.86336 542.98624h45.80352V705.3312h-33.87392zM296.6016 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM326.99392 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM470.62016 459.88864h19.456v62.27968h-19.456zM440.23808 459.88864h22.20032v62.27968h-16.62976z"
                      fill="#FFFFFF"></path>
                    <path
                      d="M243.56864 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z"
                      fill="#EB5480"></path>
                    <path
                      d="M513.29024 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM810.00448 383.03744l34.816 303.17568h34.64192L852.992 381.1328zM757.27872 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM894.6176 542.98624h45.80352V705.3312H906.5472zM744.35584 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM774.74816 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM918.3744 459.88864h19.456v62.27968h-19.456zM887.99232 459.88864h22.20032v62.27968h-16.62976z"
                      fill="#FFFFFF"></path>
                    <path
                      d="M691.32288 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z"
                      fill="#EB5480">
                    </path>
                  </svg>
                </template>
              </icon>
              哔哩哔哩
              <right-outlined/>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </normal-content>
</template>
<script setup lang="ts">
import aboutImage from "@/assets/about-image.jpg"
import appIcon from "@/assets/app-icon.jpg"

import {getName} from '@tauri-apps/api/app';

const appName = await getName();
import {getTauriVersion} from '@tauri-apps/api/app';

const tauriVersion = await getTauriVersion();
import {getVersion} from '@tauri-apps/api/app';

const appVersion = await getVersion();

import {open} from '@tauri-apps/api/shell';
import NormalContent from "@/component/NormalContent.vue"
import Icon, {
  GithubFilled,
  RightOutlined
} from '@ant-design/icons-vue';

</script>

<style scoped>
.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>